<!--
author: 何其沆(pooky)
desc: Phase Management - 管理选择人员
date: 2021-11-24
-->
<template>
  <div class="phase-management-1">
    <Search :isSearchShow="false" @search="handleSearch">
      <div style="display: flex">
        <SearchInput searchText="Authority">
          <a-select
            v-model:value="bb"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
            @change="handleAuthorityChange">
            <a-select-option v-for="item in state.bbList" :key="item.id + '&' + item.type" :label="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </Search>
    <e-container class="container">
      <div class="main-content">
        <div v-for="(item, index) in personList" :key="index" class="person-item" @click="clickPerson(item)">
          <div class="icon">
            <e-icon type="SalesPersonnel" color="#3e64f5" font-size="22px" />
          </div>
          <span>{{ item.displayName }}</span>
        </div>
      </div>
    </e-container>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
// 引入组件
import EIcon from '@/components/EIcon.vue'
import EContainer from '@/components/EContainer.vue'
import Search from '../../../components/Search2.vue'
import SearchInput from '../../../components/SearchInput.vue'
import phaseManagement from '@/api/phaseManagement.js'

const emits = defineEmits(['selectPerson'])
// 当前选择
const bb = ref('')
const bid = ref()
const type = ref()
// 下拉项
const state = reactive({
  bbList: []
})
// 人员列表
const personList = ref([])
/**
 * 改变搜索条件
 * @param val
 */
const handleAuthorityChange = val => {
  const res = val.split('&')
  bid.value = Number(res[0])
  type.value = Number(res[1])
  getPerson()
}
/**
 * 搜索
 */
const handleSearch = () => {
  getPerson()
}
/**
 * 选择人员
 * @param item
 */
const clickPerson = item => {
  emits('selectPerson', item, bid.value, type.value)
}
/**
 * 获取权限
 */
const getAuthority = () => {
  phaseManagement
    .getAuthority()
    .then(res => {
      if (res.code === 2000) {
        state.bbList = res.data
        type.value = state.bbList[0].type
        bid.value = state.bbList[0].id
        bb.value = bid.value + '&' + type.value
      }
    })
    .then(() => {
      getPerson()
    })
}
const getPerson = () => {
  phaseManagement
    .getAdminEmployeeSales({
      type: type.value,
      BUMID: bid.value
    })
    .then(res => {
      if (res.code === 2000) {
        personList.value = res.data
      }
    })
}
onMounted(() => {
  getAuthority()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_form';

.phase-management-1 {
  width: 100%;
  height: 100%;
  min-height: 100%;
  .container {
    margin-top: 24px;
    width: 100%;
    min-height: calc(100% - 128px);
    padding-top: 12px;
    .main-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .person-item {
        width: 264px;
        height: 48px;
        background-color: @phase-default;
        border-radius: 2px;
        margin-top: 24px;
        margin-right: 36px;
        display: flex;
        align-items: center;
        padding-left: 18px;
        box-sizing: border-box;
        color: @text-black;
        font-size: 14px;
        cursor: pointer;
        .icon {
          width: 30px;
          height: 30px;
          background-color: #f2f5fe;
          border: 1px solid #cbdcff;
          border-radius: 2px;
          padding-top: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
